<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right">
        <div class="account">账户设置</div>
        <div class="infor">
          <div class="infor-title">信息修改</div>
          <div class="infor-container">
            <div class="bgImg" v-if="user.backgroundImage == null">
              <img src="../assets/imgs/bgdefault.png" alt="" />
            </div>
            <div class="bgImg" v-else>
              <img :src="user.backgroundImage" alt="" />
            </div>
            <div class="reviseBtn" @click="reviseBgImg">
              装饰主页
            </div>
            <div
              class="infor-header"
              @mouseenter="showImg()"
              @mouseleave="showImg()"
            >
              <div class="bg" v-if="hiddenImg" @click="reviseImg">修改头像</div>
              <img :src="user.headImage" alt="" />
            </div>
            <div class="infor-base">基本信息</div>
            <div class="usename">
              <div class="use-tag">当前用户名</div>
              <div class="name">{{ user.nickName }}</div>
              <div class="revise" @click="revise()">{{ reviseText }}</div>
            </div>
            <div class="usename user-introduce" v-show="nameModal">
              <div class="use-tag">新用户名</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="填写昵称"
                class="newName"
                v-model="name"
                maxlength="7"
              />
            </div>
            <div class="save saveName" v-show="nameModal" @click="getName">
              保存
            </div>
            <div class="usename">
              <div class="use-tag">性别</div>
              <form action="" method="get" class="sel-sex">
                <input
                  name="sex"
                  type="radio"
                  value="1"
                  class="sex-ipt"
                  id="boy"
                  v-model="user.sex"
                  @change="getSex"
                />
                <label for="boy" class="sex">男 </label>
                <input
                  name="sex"
                  type="radio"
                  value="0"
                  class="sex-ipt"
                  id="gril"
                  v-model="user.sex"
                  @change="getSex"
                /><label for="gril" class="sex">女 </label>
                <input
                  name="sex"
                  type="radio"
                  value="2"
                  class="sex-ipt"
                  id="serect"
                  @change="getSex"
                  v-model="user.sex"
                /><label for="serect" class="sex">保密 </label>
              </form>
            </div>
            <div class="usename user-introduce">
              <div class="use-tag">简介</div>
              <input
                type="text"
                v-model="user.introduce"
                name=""
                id=""
                placeholder="不超过40个字符"
                class="introduce"
                maxlength="40"
              />
            </div>
            <div class="save " @click="saveIntro">保存</div>
            <div class="usename">
              <div class="use-tag">现居</div>
              <el-cascader
                size="large"
                :options="options"
                v-model="city"
                @change="selCity"
              >
              </el-cascader>
            </div>
            <div class="usename">
              <div class="use-tag">生日</div>
              <el-date-picker
                v-model="date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change="changeDate"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
    </div>
    <UploadImg ref="child" @sendUrl="getImg"></UploadImg>
    <UploadBg ref="bgChild" @sendUrl="getBgImg"></UploadBg>
  </div>
</template>

<script>
import defaultImg from "../assets/imgs/default.png";
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import UploadImg from "../components/UploadImg";
import UploadBg from "../components/UploadBg";
import {
  provinceAndCityData,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
export default {
  data() {
    return {
      tags: [{ name: "个人资料" }],
      options: provinceAndCityData,
      city: [],
      date: "",
      defaultIndex: 0,
      ctnIndex: 0,
      reviseText: "修改",
      nameModal: false,
      tags: [{ name: "个人资料" }],
      url: "",
      hiddenImg: false,
      user: "",
      sex: "",
      name: "",
      introduce: "",
    };
  },
  components: {
    Sidebar,
    NavHeader,
    UploadImg,
    UploadBg,
  },
  created() {
    //获取用户个人信息
    let user = localStorage.getItem("user");
    this.user = JSON.parse(user);
    this.defaultInfor(this.user, "nickName", "暂时没有昵称");
    this.defaultInfor(this.user, "headImage", defaultImg);
    console.log(this.user);
    if (this.user.city != null) {
      let city = this.user.city.split(",");
      let cityNum = TextToCode[city[0]][city[1]];
      let provinceNum = TextToCode[city[0]];
      this.city.push(provinceNum.code);
      this.city.push(cityNum.code);
    }
    if (this.user.birthday != null) {
      this.date = this.user.birthday;
    }
  },
  methods: {
    //获取性别
    getSex() {
      let user = this.user;
      this.$set(user, "sex", user.sex);
      this.upData();
    },
    //选择日期
    changeDate(val) {
      let user = this.user;
      user.birthday = this.date;
      this.$set(user, "birthday", this.date);
      this.upData();
    },
    //修改姓名
    getName() {
      // if (this.name.trim().length < 2) {
      //   this.$message.error("昵称不得小于2字符");
      //   return false;
      // }
      let user = this.user;
      user.nickName = this.name;
      this.$set(user, "nickName", this.name);
      this.upData();
    },
    //选择城市
    selCity() {
      console.log(this.city);
      let city = `${CodeToText[this.city[0]]},${CodeToText[this.city[1]]}`;
      let user = this.user;
      this.$set(user, "city", city);
      this.upData();
    },
    //修改
    revise() {
      if (this.nameModal) {
        this.nameModal = false;
        this.reviseText = "修改";
      } else {
        this.nameModal = true;
        this.reviseText = "收起";
      }
    },
    //修改个人简介
    saveIntro() {
      let user = this.user;
      this.$set(user, "introduce", this.user.introduce);
      this.upData();
    },
    //获取子组件传递来的图片路径
    getImg(e) {
      this.url = e;
      console.log(e);
      let user = this.user;
      this.$set(user, "headImage", e);
      this.upData();
    },
    getBgImg(e) {
      this.$set(this.user, "backgroundImage", e);
      this.upData();
    },
    //修改个人信息
    upData() {
      let infor = JSON.stringify(this.user);
      console.log(this.user);
      this.$post("/laiwen/user/frontend/update", infor).then((res) => {
        if (res.code == 70008) {
          this.$message.error("昵称已存在");
          return false;
        }
        localStorage.setItem("user", JSON.stringify(res.user));
        this.$message({
          message: "修改成功",
          type: "success",
        });
      });
    },
    //调用头像组件
    reviseImg() {
      this.$refs.child.showModal();
    },
    //调用背景图组件
    reviseBgImg() {
      this.$refs.bgChild.showModal();
    },
    //展示头像背景
    showImg() {
      this.hiddenImg = !this.hiddenImg;
      console.log("1111111111");
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/person.css"></style>
